<template>
  <div class="pieChart">
    <!--  柱形图  -->
    <div id="barChart" />
    <!--    &lt;!&ndash;  饼图  &ndash;&gt;-->
    <!--    <el-dropdown class="posRight" trigger="hover" szie="mini">-->
    <!--      <span style="cursor: pointer">-->
    <!--        {{ timer }}-->
    <!--        <i class="el-icon-arrow-down el-icon&#45;&#45;right" />-->
    <!--      </span>-->
    <!--      <el-dropdown-menu slot="dropdown" class="user-dropdown">-->
    <!--        <el-dropdown-item-->
    <!--          v-for="item in timerData"-->
    <!--          :key="item"-->
    <!--          @click.native="timeClick(item)"-->
    <!--        >-->
    <!--          {{ item }}-->
    <!--        </el-dropdown-item>-->
    <!--      </el-dropdown-menu>-->
    <!--    </el-dropdown>-->
  </div>
</template>

<script>
import * as echarts from 'echarts/core'
import {
  DatasetComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent
} from 'echarts/components'
import { BarChart } from 'echarts/charts'
import { CanvasRenderer } from 'echarts/renderers'

echarts.use([
  DatasetComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  BarChart,
  CanvasRenderer
])
export default {
  props: {
    datas: {
      type: Array,
      default: function() {
        return []
      }
    },
    year: {
      type: Array,
      default: function() {
        return []
      }
    }
  },
  data() {
    return {
      allSele: ['收入', '开支'], // 收入开支
      timerData: ['上月', '本月', '今年'],
      deparrment: '收入/开支',
      timer: '时间',
      sourceData: []
    }
  },
  watch: {
    datas: {
      handler() {
        this.queryContrast()
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    queryContrast() {
      this.year.pop()
      this.year.shift()
      this.year.forEach(item => {
        this.sourceData.push({
          product: item
        })
      })
      this.datas.forEach(res => {
        this.sourceData.map((ite, index) => {
          if (res.pItemtype === '收入合计') {
            ite.收入 = res[index + 1]
          }
          if (res.pItemtype === '支出合计') {
            ite.支出 = res[index + 1]
          }
        })
      })
      this.drawLine()
    },
    // 模板
    drawLine() {
      // // 基于准备好的dom，初始化echarts实例
      const barChart = echarts.init(document.getElementById('barChart'))
      // 绘制图表
      barChart.setOption({
        title: { text: '收入对比图表' },
        tooltip: {},
        legend: {},
        dataset: {
          dimensions: ['product', '支出', '收入'],
          source: this.sourceData
        },
        xAxis: {
          type: 'category'
        },
        yAxis: {
          name: '人民币'
        },
        series: [{
          type: 'bar',
          itemStyle: {
            color: '#47b262'
          }
        }, {
          type: 'bar',
          itemStyle: {
            color: '#eb5454'
          }
        }]
      })
    }
  }
}
</script>

<style scoped lang="scss">
#barChart {
  width: 100%;
  height: 250px;
  margin: 0 auto;
}
.pieChart {
  position: relative;
  .posRight {
    position: absolute;
    top: 0;
    right: 100px;
  }
  .posRight1 {
    right: 0;
  }
}
</style>
